<template>
  <div class="topMain">
    <div class="topBackgroup flex jcc ">
      <div class="flex jcsb aic mainWidth">
        <!-- 左 -->
        <div class="flex aic">
          <div>欢迎光临本站</div>
          <div class="prColor">请登录</div>
          <div>免费注册</div>
          <div>微信登陆</div>
          <!-- <div class="fs18 mgr20 prColor">{{ topData.name }}</div>
          <div class="prColor">
            <span><van-icon name="location-o" />{{ topData.mrCity }}</span>
          </div>
          <div class="fs12">[切换城市]</div>
          <div
            v-for="(i, index) in leftTag"
            :class="active == index ? 'prColor' : ''"
          >
            {{ i }}
          </div> -->
        </div>
        <!-- 右 -->
        <div class="flex aic">
          <div
            v-for="i in rightTag"
            class="c9 pdx10"
            :class="i.rBoder ? 'rBoder' : ''"
          >
            <span><van-icon :name="i.icon" class="cr" /></span>
            <span :class="i.icon ? 'prColor' : ''">{{ i.name }}</span>
            <span v-if="i.isLink"
              ><van-icon name="arrow-down" size="12"
            /></span>
          </div>
        </div>
      </div>
    </div>
    <div class="flex jcc ">
      <div class="mainWidth flex aic jcsb">
        <div class="flex aic mgt20 mgb20">
          <img src="../common/img/cat.jpg" alt="" class="logo mgr10" />
          <span class="fs40">网站名</span>
        </div>
        <div class="pore">
        <div class="searchInput flex onFocus">
          <van-field
            v-model="search"
            placeholder="请输入用户名"
            right-icon="aim"
            @focus="isFocus = true"
            @blur="isFocus = false"
            class="bdr"
          >
            <template #label>
              <div class="flex aic selectLeft" @click="openModal">
                <div class="mgr10">{{ job }}</div>
                <van-icon name="play" class="dowm" />
              </div>
            </template>
            <template #extra>
              <span class="mgl8 c9">地图</span>
            </template>
          </van-field>
          <van-button class="btn">搜索</van-button>
        </div>
      </div>
      <div></div>
      </div>
    </div>
    <div class="nav flex jcc aic pore" @click.self="closeModal" v-if="false">
      <div class="pore">
        <div class="searchInput flex" :class="isFocus ? 'onFocus' : ''">
          <van-field
            v-model="search"
            placeholder="请输入用户名"
            right-icon="aim"
            @focus="isFocus = true"
            @blur="isFocus = false"
            class="bdr"
          >
            <template #label>
              <div class="flex aic selectLeft" @click="openModal">
                <div class="mgr10">{{ job }}</div>
                <van-icon name="play" class="dowm" />
              </div>
            </template>
            <template #extra>
              <span class="mgl8 c9">地图</span>
            </template>
          </van-field>
          <van-button class="btn">搜索</van-button>
        </div>
        <div class="mcard" v-if="showModel">
          <div
            v-for="(i, index) in joinType"
            class="lineSpan"
            @mouseenter="leftMouse(index)"
          >
            <div>{{ i.name }}</div>
            <van-icon name="play" />
          </div>
        </div>
        <div class="sonCard" v-if="leftActive >= 0">
          <div class="pd8">
            <div class="fs14 mgb10">{{ joinType[leftActive].name }}</div>
            <div class="fs12" v-for="j in joinType[leftActive].children">
              <div class="flex jcsb">
                <div class="sonName">{{ j.name }}</div>
                <div class="flex fww f1">
                  <div class="minType" v-for="k in j.list">
                    <div>{{ k }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped>
@import "../../public.css";
@import "../../ui/vant-ui/ui.css";
.topMain {
  font-size: 12px;
  color: #666;
}
.topBackgroup {
  background-color: #f9f9f9;
  padding: 10px;
}
.topBackgroup div {
  margin-right: 8px;
}
.searchInput .btn {
  border: none;
  width: 100px;
  background-color: var(--primary-color);
  color: #fff;
  transform: translate(-2px, 0);
}
.logo {
  width: 80px;
  height: 80px;
  border-radius: 50px;
}
.selectLeft:hover {
  color: var(--primary-color);
}
.dowm {
  transform: rotate(90deg);
  font-size: 12px;
}
.rBoder {
  border-right: 1px solid #999;
}
.bdr {
  border-radius: 5px;
  z-index: 100;
}
.login {
  border: 1px solid var(--primary-color);
  padding: 2px 10px;
  border-radius: 10px;
}
.login:hover {
  color: var(--primary-color);
}
.mainWidth {
  width: 1400px;
  color: #999;
}
.nav {
  width: 100%;
  height: 300px;
  background-color: var(--primary-color);
  background-image: url("../../img/mainNav.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.searchInput {
  width: 550px;
  opacity: 0.4;
  border: 2px solid var(--primary-color);
  background-color: var(--primary-color);
  border-radius: 8px;
}
.searchInput:hover,
.onFocus {
  opacity: 1;
}
.mcard {
  position: absolute;
  padding: 10px;
  left: 0px;
  top: 50px;
  width: 100px;
  height: 130px;
  background-color: #fff;
  border-radius: 5px;
  color: #000;
  overflow-y: scroll;
}
.sonCard {
  position: absolute;
  left: 130px;
  top: 50px;
  width: 400px;
  height: 150px;
  background-color: #fff;
  border-radius: 5px;
  color: #000;
  overflow-y: scroll;
}
.lineSpan {
  display: flex;
  justify-content: space-between;
  padding: 8px;
}
.lineSpan:hover {
  color: var(--primary-color);
}
.sonName {
  width: 70px;
  margin: 8px;
}
.minType {
  margin: 8px;
}
.minType:hover {
  color: var(--primary-color);
}
 @media (min-width:500px) {
  .nav{
    width: 400px !important;
  }
    }
</style>
<script>
module.exports = {
  name: "top",
  data() {
    return {
      leftTag: [
        "首页",
        "推荐职位",
        "搜索 · 公司",
        "校园 · 海归",
        "APP",
        "咨询",
        "有了",
        "无障碍专区",
      ],

      rightTag: [
        { name: "我的信息", isLink: true },
        { name: "我关注的店铺", icon: "audio" },
        { name: "购物车", icon: "audio" },
        { name: "收藏夹", isLink: true, rBoder: true },
        { name: "手机版", icon: "audio", isLink: true },
        { name: "商家支持", isLink: true },
      ],
      active: 0,
      search: "",
      isFocus: false,
      job: "xxxx",
      jobleft: ["大类1", "大类2", "大类3", "大类4", "大类5", "大类6"],
      joinType: [
        {
          name: "大类1",
          children: [
            {
              name: "标题1",
              list: [
                "子类1",
                "子类2",
                "子类3",
                "子类4",
                "子类5",
                "子类1",
                "子类2",
                "子类3",
                "子类4",
                "子类5",
                "子类1",
                "子类2",
                "子类3",
                "子类4",
                "子类5",
              ],
            },
          ],
        },
        {
          name: "大类2",
          children: [
            {
              name: "标题2",
              list: ["子类1", "子类2", "子类3", "子类4", "子类5"],
            },
          ],
        },
        {
          name: "大类3",
          children: [
            {
              name: "标题3",
              list: ["子类1", "子类2", "子类3", "子类4", "子类5"],
            },
          ],
        },
        {
          name: "大类4",
          children: [
            {
              name: "标题4",
              list: ["子类1", "子类2", "子类3", "子类4", "子类5"],
            },
          ],
        },
      ],
      showModel: false,
      leftActive: -1,
    };
  },
  props: {
    topData: {
      type: Object,
      default: function () {
        return {
          name: "网站名字",
          mrCity: "阳江",
        };
      },
    },
  },
  methods: {
    openModal() {
      this.showModel = true;
      // 在打开弹窗时，添加全局点击事件监听
      document.addEventListener("click", this.closeModalOnOutsideClick);
    },
    closeModal() {
      this.showModel = false;
      this.leftActive = -1;
      // 在关闭弹窗时，移除全局点击事件监听
      document.removeEventListener("click", this.closeModalOnOutsideClick);
    },
    closeModalOnOutsideClick(event) {
      // 获取弹窗元素的引用
      const modal = this.$refs.modal;
      // 如果点击的区域不在弹窗内部，则关闭弹窗
      if (modal && !modal.contains(event.target)) {
        this.closeModal();
      }
    },
    leftMouse(index) {
      this.leftActive = index;
    },
  },
};
</script>
